<template>
     <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="884px" class="myDialogClass"  @close="closeDialog">

    <!-- <span>这是一段信息</span> -->
     <div v-if="type == 1">
    <div style="font-weight: 400;font-size: 16px;color: #333333;margin-bottom: 15px;">群聊名称</div>
    <el-input v-model="content" class="memberInput" placeholder="请输入群聊名称"></el-input>
    <div style="font-weight: 400;font-size: 16px;color: #333333;margin-bottom: 15px;margin-top: 19px;">群聊头像</div>
    <div class="flexal" style="margin-bottom: 27px;">
      <img :src="require('@/assets/img/messageRight/group.png')"  style="width: 57px;height: 57px;border-radius: 50%;" />
      <div style="font-weight: 400;font-size: 16px;color: #366EF4;margin-left: 20px;">点击修改</div>
    </div>
    </div>
     <div class="frame" :style="{'height': type? '300px':'531px'}">
      <div class="frame-block" >
        <div class="left-item" style="margin-top: 19px;margin-left: 14px;">
        <el-input v-model="input"  placeholder="搜索">
          <div slot="prefix" style="height: 100%;display: flex;align-items: center;justify-content: center;">
            <div  class="prefix-icon3"></div>
          </div>
        </el-input>
      </div>
        <!-- <div class="flexal" style="margin-top: 20px;margin-left: 14px;">
          <img :src="require('@/assets/img/popUp/people.png')"  style="width: 30px;height: 30px;margin-right: 10px;" />
          <div class="frame-text">组织内联系人</div>
        </div> -->
        <div class="frame-people infinite-list"  v-infinite-scroll="scrollLoad" style="overflow:auto" :style="{'height': type? '240px':'470px'}">
          <template v-for="(item,index) in list">
        <div class="flexal" style="margin-top: 22px;padding: 0px 14px;"  :key="index" v-if="list.length!=0">
          <img :src="item.avatar"  style="width: 38px;height: 38px;border-radius: 50%;margin-right: 5px;" />
          <div class="frame-text" style="flex: 1;">{{item.name}}</div>
          <el-checkbox v-model="item.checked" @click="checkPeople(index)"></el-checkbox>
        </div>
        </template>
        <div style="width: 100%;height: 100%;" class="flexcen" v-if="list.length == 0">
          列表为空
        </div>
      </div>
      </div>
      <div class="frame-block" style="border-left: 1px solid #B0B1B4;">
        <div class="frame-text" style="color: #272B34;font-size: 14px;margin-top: 19px;margin-left: 15px;">已选择：{{num}}人</div>
        <div class="frame-people" :style="{'height': type? '254px':'485px'}">
        <template  v-for="(item, index) in list">
        <div class="flexal" style="margin-top: 22px;padding: 0px 14px;" :key="index" v-if="item.checked == true">
          <img :src="item.avatar"  style="width: 38px;height: 38px;border-radius: 50%;margin-right: 5px;" />
          <div class="frame-text" style="flex: 1;">{{item.name}}</div>
          <img :src="require('@/assets/img/cancel.png')" @click="cancelClick(index)"  style="width: 14px;height: 14px" />
        </div>
      </template>
      </div>
      </div>
     </div>
    <!--弹窗底部-->
    <template #footer>
        <span class="myDialogFooter">
            <el-button type="primary" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false" style="background: #0052D9;color: #FFFFFF;" v-if="type == 0">确定</el-button>
            <el-button type="primary" @click="dialogVisible = false" style="background: #0052D9;color: #FFFFFF;" v-if="type == 1">创建</el-button>
        </span>
    </template>
    </el-dialog>
     </div>
     
  </template>
   
  <script>
  export default {
    name: 'memberPop',
    props: {
      // 是否显示弹窗
      dialogVisibleShow: {
            type: Boolean,
            default: false
	    },
      // 弹窗标题
      title: {
            type: String,
            default: '添加群成员'
	    },
      // 联系人列表
      list:{
            type: Array,
            default: []
      },
      // 组件类型，0:添加群成员 1:创建群组
      type:{
            type: Number,
            default: 0
      }
    },
    data() {
      return {
        dialogVisible: false,
        input:'',
        num:0,
        content:''
      };
    },
    
    watch: {
    // New: 新值 | Old: 老值
    dialogVisibleShow(New, Old) {
      this.dialogVisible = New
      // console.log(`新值:${New} ——— 老值:${Old}`)
    },
    list: {
      handler (value) { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        // console.log('数组变化',value)
        let num = 0
        value.forEach(element => {
          if(element.checked == true){
            num++
          }
        });
        this.num = num
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
    },
    mounted(){
        // console.log('组件初始化',this.dialogVisible)
    },
    methods: {
        closeDialog(){
            // console.log('我被取消了',this.dialogVisibleMember)
            // this.dialogVisible = false
            // this.dialogVisibleMember = 'false'
            this.$emit('updateDialog')
            // this.$emit('update:dialogVisibleMember', false)
        },
        cancelClick(index){
            // console.log('关闭前',e)
            // this.checkList.push(list[index])
            this.list[index].checked = false
        },
        scrollLoad(){
          console.log('下拉到底部了')
        }
    },
  };
  </script>
   
  <style scoped lang="less">
  /* .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9999;
  } */

  .frame{
    width: 836px;
    height: 531px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #B0B1B4;
    display: flex;

    .frame-block{
      width: 50%;
    }
    .left-item{
      display: flex;
      width: 390px;
      align-items: center;
      border-radius: 8px;
      .prefix-icon3{
        margin-left: 5px;
        width: 15px;
        height: 15px;
        background-image: url('../../assets/img/navigation/search.png');
        background-size: cover; /* 确保图像覆盖整个背景区域 */
        background-position: center; /* 图像居中对齐 */
        background-repeat: no-repeat; /* 防止图像重复 */
      }
      /deep/.el-input__inner{
        height: 36px;
        font-size: 15px;
        border-radius: 8px;
      }
    }
    .frame-text{
      font-weight: 400;
      font-size: 16px;
      color: #000000;
    }
    .frame-people{
        height: 420px;
        // background: #F8F9FA;
        // background-color: #000000;
        z-index: 101; /* Ensure it sits on top of other content */
        // -webkit-overflow-scrolling: touch;
        // overflow-scrolling: touch;
        // overflow-y: auto;
        // overflow-x: hidden;
    }
  }
  
   .el-dialog .el-dialog__footer
{
    padding: 10px;
}
    /deep/.el-dialog__body{
          padding: 0 1vw;
      }
    /deep/.el-checkbox__inner{
      width: 21px;
      height: 21px;
      border: 2px solid #9B9B9B;
      border-radius: 50%;
    }
    /* 对勾样式 */
    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      border-left: 0;
      border-top: 0;
      left: 6px;
      top: 3px;
    }
    /deep/.memberInput .el-input__inner{
      width: 836px;
      height: 56px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid #B0B1B4;
    }
.myDialogFooter .el-button
{
    // border-color: rgb(42,155,152);
    // background-color: rgb(242,249,249);
    // color: rgb(42,155,152);
    width: 113px;
    height: 45px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 2px solid #0052D9;
    font-size: 16px;
    color: #0052D9;
}
  </style>